<template>
  <div class="order-detail">
    <view v-if="currentOrderId">
      <u-cell-group :border="false">
        <u-cell title="服务类型" :value="projectData.title"></u-cell>
        <u-cell title="客户名称" :value="clientInfo.realName"></u-cell>
        <u-cell title="客户联系方式" :value="clientInfo.mobilePhone"></u-cell>
        <u-cell
          title="客户地址"
          :value="normalAddress.address + normalAddress.addressDetail"
        ></u-cell>
        <u-cell
          title="客户预约时间"
          :value="$u.timeFormat(orderData.creatorTime, 'yyyy年mm月dd日 hh:MM')"
        >
        </u-cell>
        <u-cell title="客户下单金额">
          <template slot="value">
            <text style="color: #f60000">
              ¥ {{ Number(projectData.price) + orderData.distance * 10 }}
            </text>
          </template>
        </u-cell>
        <u-cell
          title="服务时长"
          :value="projectData.project_time + '分钟'"
        ></u-cell>
      </u-cell-group>

      <view class="show_time" v-if="!(orderData.status_code > 3)">
        <view>客户已下单时间</view>
        <view v-if="orderData">
          <view class="time">
            <text class="time__item"
              >{{
                $u.timeFormat(Date.now() - orderData.creatorTime, "hh")
              }}&nbsp;:&nbsp;</text
            >
            <text class="time__item"
              >&nbsp;{{
                $u.timeFormat(Date.now() - orderData.creatorTime, "MM")
              }}&nbsp;:</text
            >
            <text class="time__item">{{
              $u.timeFormat(Date.now() - orderData.creatorTime, "ss")
            }}</text>
          </view>
        </view>

        <view
          style="margin-top: 100rpx"
          class="flex justify-between items-center show_time_btn"
          @click="handleOrderBtn"
        >
          <view class="cancel-btn" :data-order="0">拒绝接单</view>
          <view class="sure-btn" :data-order="1">确认接单</view>
        </view>
      </view>
    </view>

    <u-empty
      v-else
      mode="data"
      icon="http://cdn.uviewui.com/uview/empty/data.png"
    >
    </u-empty>
  </div>
</template>

<script>
import { getModelInfo, getModelList, updateModel } from "@/api";
import { getSearchFilter } from "@/common/function";
import infoMixin from "@/common/mixins/info";
export default {
  mixins: [infoMixin],
  data() {
    return {
      title: "账单详情",
      isReady: false,
      loading: false,
      disabled: false,
      orderData: {},
      clientInfo: {}, //客户信息
      currentOrderId: "",
      normalAddress: {}, //默认地址信息
      projectData: {}, //项目信息
      technicianData: {}, //技师列表信息
    };
  },
  components: {},
  watch: {},
  methods: {
    // 获取订单详情
    async getOrderDetail(id) {
      let that = this;
      await getModelInfo("66002f4f5efd5153ff566ec3", id)
        .then(async (res) => {
          this.orderData = res.data;
          this.isReady = this.orderData.is_orders == 1 ? true : false;
          await Promise.all([
            that.getUserInfo(that.userInfo.id),
            that.getProjectInfo(res.data.current_project_Info),
            that.getNormalAddress(res.data.address_id),
            that.getCurrentTechnicianData(res.data.baseInfo_id),
          ]);
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: "none",
          });
        });
    },
    // 获取客户信息
    async getUserInfo(user_id) {
      let filterData = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ user_id }, { method: "eq" }),
      };
      try {
        const { data, code } = await getModelList(
          "660247fe5efd5153ff56b807",
          filterData
        );
        if (code === 200) this.clientInfo = data?.list?.[0];
      } catch (error) {
        uni.showToast({
          title: error,
          icon: "none",
        });
      }
    },
    // 获取项目信息
    async getProjectInfo(id) {
      try {
        const { data, code } = await getModelInfo(
          "65b1d17c0921260197c48a76",
          id
        );
        if (code === 200) this.projectData = data;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取默认地址信息
    async getNormalAddress(creatorUserId) {
      const { data } = await getModelInfo(
        "65c1d9085efd5153ff55e6f4",
        creatorUserId
      );
      this.normalAddress = data;
    },
    //获取当前技师的技师列表
    async getCurrentTechnicianData(technician_Info) {
      let filter = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ technician_Info }, { method: "eq" }),
      };
      // 获取当前技师的技师列表
      const { data } = await getModelList("65fbe6475efd5153ff566a8b", filter);
      // console.log(data);
      this.technicianData = data?.list?.[0];
    },
    // 修改技师状态为已出发
    async updateTechnicianIsGo() {
      return await updateModel(
        "66002f4f5efd5153ff566ec3",
        { ...this.orderData, is_orders: 1, go_time: Date.now() },
        this.currentOrderId
      );
    },
    // 修改技师状态为服务中
    async updateModelStatus() {
      // 技师状态变为服务中
      return await updateModel(
        "65fbe6475efd5153ff566a8b",
        { technician_status: 2 },
        this.technicianData._id
      );
    },
    // 拒绝或者是确认订单
    async handleOrderBtn(e) {
      let that = this;
      let orderData = this.orderData;
      let message;
      if (e.target.dataset.order) {
        // 确认订单 修改为技师已出发
        try {
          await Promise.all([
            that.updateTechnicianIsGo(),
            that.updateModelStatus(),
          ]);
          message = "技师已出发了";
        } catch (error) {
          console.log(error);
        }
      } else {
        // 修改订单状态为9
        await updateModel(
          "66002f4f5efd5153ff566ec3",
          { ...orderData, status_code: 9 },
          this.currentOrderId
        );
        message = "技师取消订单";
      }

      if (message) {
        this.$message(message, "none");
        // 跳转都当前项目订单页面 携带技师列表_id
        this.$jump("/subPages/user/technician/order/current-order", {
          query: { technicianId: this.technicianData.technician_Info },
          methods: "reLaunch",
          duration: 800,
        });
      }
    },
  },
  onLoad(options) {
    this.currentOrderId = options.orderId;
    if (this.currentOrderId) this.getOrderDetail(options.orderId);
  },
};
</script>
<style lang="scss" scoped>
%button-base {
  min-width: 300rpx;
  height: 88rpx;
  padding: 10rpx;
  font-size: 38rpx;
  border-radius: 55rpx;
  text-align: center;
  line-height: 88rpx;
  margin-left: 20rpx;
}

.order-detail {
  //   color: red;
  .show_time {
    width: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    margin-top: 100rpx;

    .time {
      @include flex;
      align-items: center;
      justify-content: center;

      &__custom {
        margin-top: 4px;
        width: 22px;
        height: 22px;
        background-color: $u-primary;
        border-radius: 4px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;

        &__item {
          color: $u-theme-color;
          font-size: 18px;
          font-weight: bold;
          text-align: center;
        }
      }

      &__doc {
        color: $u-primary;
        padding: 0px 4px;
      }

      &__item {
        color: $u-theme-color;
        font-size: 30px;
        margin-right: 4px;
      }
    }

    &_btn {
      @include flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 20px;

      .cancel-btn {
        @extend %button-base;
        background-color: #f6ebe7;
        color: $u-theme-color;
      }

      .sure-btn {
        @extend %button-base;
        color: #fff;
        background: $u-theme-color;
      }
    }
  }
}
</style>
